<style>
  .button-bottom {
    /*padding: .5rem 1rem;*/
    /*width: 100%;*/
    /*background: #fff;*/
    /*border-top: 1px solid #e1e1e1;*/
    /*height: auto;*/
    /*height: 3.15rem;*/
    /*padding: 0 1rem;*/
    margin-left: 0;
    background: #f60;
    color: #fff;
    border-top: none;
  }
  .button-bottom .submit-button {
    background: #4cd964 ;
    height: 100%;
    border: 1px solid #4cd964;
    line-height: 2.5rem;
    text-align: center;
    color: #fff;
  }
  .order .o-counts {
    font-size: .6rem;
    color: #fff;
    background: #0894ec;
    flex-basis: 1.25rem;
    display: inline-block;
    height: 1.25rem;
    text-align: center;
    line-height: 1.25rem;
  }
  .order .o-title {
    flex-basis: 80vw;
    padding: 0 .3rem;
  }
  .order .o-price {
    color: #c30;
  }
  .state {
    width: 20%;
    float: left;

  }
  .state .s-name {
    width: 10vw;
    height: 10vw;
    line-height: 10vw;
    text-align: center;
    border: .2vw solid #ccc;
    color: #ccc;
    border-radius: 50%;
    font-size: .5rem;
    margin: 0 4.5vw;
    position: relative;
  }
  .state .s-name:before {
    content: '';
    position: absolute;
    width: 9vw;
    height: .2vw;
    top:5vw;
    left:-9vw;
    background: #ccc;
  }
  .state .s-name.success {
    border: .2vw solid #3c3;
    color: #3c3;
  }
  .state .s-name.success:before {
    background: #3c3;
  }
  .state:first-child .s-name:before {
    height: 0;
    width: 0;
  }
  .state .s-time {
    font-size: .4rem;
    text-align: center;
    color: #888;
  }
  .order .card-detail {
    background: #eee;
    display: none;

  }
</style>
<div class="page">
  <!--<header class="bar bar-nav">-->
  <!--&lt;!&ndash;<a class="icon icon-menu pull-left open-panel"></a>&ndash;&gt;-->
  <!--<h1 class="title">我的</h1>-->
  <!--</header>-->
  <div class="content">
    <div class="buttons-tab">
      <a href="#tab1" class="tab-link active button">购物车</a>
      <a href="#tab2" class="tab-link button">订单</a>
    </div>
    <div class="content-block">
      <div class="tabs">
        <div id="tab1" class="tab active">
          <div class="content infinite-scroll infinite-scroll-bottom" data-distance="50" style="margin-top: 40px;">

            <div class="list-container list-block" style="margin: .75rem 0;">
              <!--<div class="list-block">-->
              <ul style="border: none;">

                <li class="swipeout" style="border-bottom: none;">
                  <!-- Usual list element wrapped with "swipeout-content" -->
                  <div class="swipeout-content">
                    <!-- Your list element here -->
                    <div class="card product" style="margin: 0;">
                      <div class="card-content">
                        <div class="list-block media-list">

                          <div class="item-content">
                            <div class="item-media">
                              <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
                            </div>
                            <div class="item-inner elip" style="border: none;">
                              <div class="item-title-row">
                                <div class="item-title elip">A2 Platinum Infant Formula Stage 1</div>
                              </div>
                              <div class="item-subtitle elip">白金系列1段婴儿配方奶粉</div>
                            </div>
                          </div>

                        </div>
                      </div>
                      <div class="card-footer" style="border-top: none;border-radius:0;padding-top: 0;min-height: 1rem;">
                        <span>900G</span>
                        <span style="color:#CC3300;">￥666</span>
                      </div>
                    </div>
                  </div>

                  <!-- Swipeout actions right -->
                  <div class="swipeout-actions-right">
                    <!-- Swipeout actions links/buttons -->
                    <a href="#" style="background: #CC3300;">删除</a>
                    <!--<a class="swipeout-close" href="#">Action 2</a>-->
                  </div>
                </li>




              </ul>
              <!--</div>-->
            </div>



          </div>
          <div class="button-bottom bar bar-tab row">
            <div class="col-60" style="line-height: 2.5rem;text-align: center;">总计￥666</div>
            <div class="col-40 submit-button">提交订单</div>
          </div>
        </div>
        <div id="tab2" class="tab">
          <div class="content-block">


            <div class="card order" style="margin: 0;">
              <div class="card-content">
                <div class="list-block media-list">

                  <div class="item-content" style="padding-left: 3vw;">

                    <div class="item-inner elip" style="border: none;padding-right: 3vw;">
                      <div class="item-title-row">
                        <div class="item-title elip" style="width: 100%;display:flex;justify-content: space-between;margin-bottom: .5rem;">
                          <div class="o-counts">5</div>
                          <div class="o-title elip">白金系列1段婴儿配方奶粉</div>
                          <div class="o-price">￥6666</div>
                        </div>
                      </div>
                      <div class="item-subtitle">
                        <div class="state">
                          <div class="s-name success">下单</div>
                          <div class="s-time">2011.11.11</div>
                        </div>
                        <div class="state">
                          <div class="s-name success">处理</div>
                          <div class="s-time">2011.11.22</div>
                        </div>
                        <div class="state">
                          <div class="s-name">付款</div>
                        </div>
                        <div class="state">
                          <div class="s-name">发货</div>
                        </div>
                        <div class="state">
                          <div class="s-name">完成</div>
                        </div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
              <div class="card-detail">
                <div>订单号</div>
                <div>商品详情</div>
              </div>
            </div>





          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  $(function(){
    var res = {
      counts : 5,
      data : [{
        ename : "A2 Platinum Infant Formula Stage 1",
        cname : "白金系列1段婴儿配方奶粉",
        type : "婴儿奶粉",
        code : "9421902960031",
        format : "900G",
        thum : ["//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg",
          "//img.alicdn.com/tps/i1/TB1SKhUHVXXXXb7XXXX0HY8HXXX-1024-1024.jpeg",
          "//img.alicdn.com/tps/i4/TB1AdxNHVXXXXasXpXX0HY8HXXX-1024-1024.jpeg" ],
        price : "600",
      },{
        ename : "Abbott Pediasure Vanilla",
        cname : "Abbott Pediasure Vanilla 小安素",
        format : "850G",
        thum : ["//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg"],
        price : "1000",
      },{
        ename : "Aptamil Gold+ 1 Infant Formula from birth to 6 months",
        cname : "爱他美金装一段",
        format : "900G",
        thum : ["//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg"],
        price : "888",
      },{
        ename : "Aptamil Gold+ 1 Infant Formula from birth to 6 months",
        cname : "爱他美金装一段",
        format : "900G",
        thum : ["//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg"],
        price : "888",
      },{
        ename : "Aptamil Gold+ 1 Infant Formula from birth to 6 months",
        cname : "爱他美金装一段",
        format : "900G",
        thum : ["//img.alicdn.com/tps/i3/TB1kt4wHVXXXXb_XVXX0HY8HXXX-1024-1024.jpeg"],
        price : "888",
      }],
    }


    var data = res.data;
    // 加载flag
    var loading = false;
//    // 最多可加载的条目
//    var maxItems = maxItems;
//
//    // 每次加载添加多少条目
//    // var itemsPerLoad = itemsPerLoad;
//    if(maxItems > itemsPerLoad){
//      $('.infinite-scroll-bottom .list-container ul').after('<div class="infinite-scroll-preloader"><div class="preloader"></div></div>');
//    }
//    function addItems(itemsPerLoad, lastIndex) {
//      var j = (lastIndex < maxItems && itemsPerLoad <= maxItems - lastIndex) ? lastIndex + itemsPerLoad : maxItems;
//      console.log(j,"j");
//      // 生成新条目的HTML
//      var html = '';
//      for (var i = lastIndex + 1; i <= j; i++) {
//        html += '<li class="swipeout" style="border-bottom:1px solid #e7e7e7;"><div class="swipeout-content">' +
//          '<div class="card" style="margin: 0;border-radius:0;"><div class="card-content">' +
//          '<div class="list-block media-list"><div class="item-content"><div class="item-media">' +
//          '<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div>' +
//          '<div class="item-inner elip" style="border:none;"><div class="item-title-row">' +
//          '<div class="item-title elip">A2 Platinum Infant Formula Stage 1</div></div>' +
//          '<div class="item-subtitle elip">白金系列1段婴儿配方奶粉</div></div></div></div></div>' +
//          '<div class="card-footer" style="border:none;border-radius:0;padding-top: 0;min-height: 1rem;">' +
//          '<span>900G</span>' +
//          '<span style="color:#CC3300;font-size: .85rem;">￥66' + i + '</span></div></div></div>' +
//          '<div class="swipeout-actions-right">' +
//          (b ? '<a href="#" style="background: #f60;">加入购物车</a>': '<a href="#" style="background: #CC3300;">删除</a>')+
//          '</div></li>';
//      }
//      // 添加新条目
//      $('.infinite-scroll-bottom .list-container ul').append(html);
//      $('.infinite-scroll-preloader').css('opacity','0');
//    }
    //预先加载多少条
//    addItems(itemsPerLoad, 0);
    $('.swipeout:eq(0)').css('border-top','1px solid #e7e7e7');

    // 上次加载的序号

//    var lastIndex = itemsPerLoad;

    // 注册'infinite'事件处理函数
    $(document).on('infinite', '.infinite-scroll-bottom',function() {
      $('.infinite-scroll-preloader').css('opacity','1');

      // 如果正在加载，则退出
      if (loading) return;

      // 设置flag
      loading = true;

      // 模拟1s的加载过程
      setTimeout(function() {
        // 重置加载flag
        loading = false;
        var html = '';
        for (var i in data) {
          html += '<li class="swipeout" style="border-bottom:1px solid #e7e7e7;"><div class="swipeout-content">' +
            '<div class="card" style="margin: 0;border-radius:0;"><div class="card-content">' +
            '<div class="list-block media-list"><div class="item-content"><div class="item-media">' +
            '<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44"></div>' +
            '<div class="item-inner elip" style="border:none;"><div class="item-title-row">' +
            '<div class="item-title elip">A2 Platinum Infant Formula Stage 1</div></div>' +
            '<div class="item-subtitle elip">白金系列1段婴儿配方奶粉</div></div></div></div></div>' +
            '<div class="card-footer" style="border:none;border-radius:0;padding-top: 0;min-height: 1rem;">' +
            '<span>900G</span>' +
            '<span style="color:#CC3300;font-size: .85rem;">￥66' + i + '</span></div></div></div>' +
            '<div class="swipeout-actions-right">' +
            (b ? '<a href="#" style="background: #f60;">加入购物车</a>': '<a href="#" style="background: #CC3300;">删除</a>')+
            '</div></li>';
        }
        // 添加新条目
        $('.infinite-scroll-bottom .list-container ul').append(html);
//        if (lastIndex >= maxItems) {
//          // 加载完毕，则注销无限加载事件，以防不必要的加载
//          $.detachInfiniteScroll($('.infinite-scroll'));
//          // 删除加载提示符
//          $('.infinite-scroll-preloader').remove();
//          $.toast("没有更多商品");
//          return;
//        }

        // 添加新条目
        addItems(itemsPerLoad, lastIndex);
        // 更新最后加载的序号
        lastIndex = $('.list-container li.swipeout').length;
        // console.log(lastIndex);
        //容器发生改变,如果是js滚动，需要刷新滚动
//          $.refreshScroller();
      }, 1000);
    });

    //购物车点击
    $(document).on('click','.product',function(){
      window.location.href = 'detail';
    });
    //订单点击
    $(document).on('click','.order',function(){
      $(this).find('.card-detail').slideToggle();
    });
  });
</script>
<script>
  $(document).ready(function () {
    $.get('/user/cart', function (res, status) {
      console.log(res);
      console.log(status);
    })
  })
</script>




